<template>
    <el-submenu ref="subMenu" :index="itemOrMenu.path" :popper-append-to-body="false">
        <template #title>
            <!--图标-->
            <el-image v-if="itemOrMenu.meta.iconDefault" class="menu-icon-left default"
                      :src="iconSrc(itemOrMenu.meta.iconDefault)"><i slot="error"/>
            </el-image>
            <el-image v-if="itemOrMenu.meta.iconActive" class="menu-icon-left active"
                      :src="iconSrc(itemOrMenu.meta.iconActive)"><i slot="error"/>
            </el-image>
            <el-image v-if="itemOrMenu.meta.iconDefault && !itemOrMenu.meta.iconActive" class="menu-icon-left active"
                      :src="iconSrc(itemOrMenu.meta.iconDefault)"><i slot="error"/>
            </el-image>
            <vab-icon class="menu-icon-left"
                      v-if="itemOrMenu.meta.iconFont"
                      :icon="itemOrMenu.meta.iconFont"
                      :is-custom-svg="itemOrMenu.meta.isCustomSvg"
                      :title="translate(itemOrMenu.meta.title)"/>

            <!--菜单名称-->
            <span :title="translate(itemOrMenu.meta.nameI18nKey || itemOrMenu.meta.title)">
				{{ translate(itemOrMenu.meta.nameI18nKey || itemOrMenu.meta.title ) }}
			</span>
        </template>
        <slot/>
    </el-submenu>
</template>

<script lang="ts">
import {baseURL} from '@/config'
import {Component, Prop} from 'vue-property-decorator';
import BaseVue from "@/common/base-vue";
import {StoreDictEnum} from "@/store/enum/store.enum";
import {ICON_API} from "@/layout/const/menu.const";

@Component({components: {}})
export default class Submenu extends BaseVue {
    @Prop({type: Object})
    private itemOrMenu;

    /**
     *加载图片的远程地址
     */
    get iconSrc() {
        return (key: string) => {
            return baseURL + ICON_API + key;
        }
    };
}
</script>
